import React, { useEffect } from 'react'
import Menu from '@/views/Menu'
import '@/assets/css/CouponIndex.scoped.css'
import { sleep } from 'antd-mobile/es/utils/sleep'

const Component = () =>
{
  let [active, SetActive] = useState('2')

  //选项卡切换
  const TabChange = async (key: string) => {
    SetActive(key)
    onRefresh()
  }
  const [couponList, setCouponList] = useState<Array>([])
  const [hasMore, setHasMore] = useState<Boolean>(true)
  const [page, setPage] = useState<Number>(1)
  const [pageSize, setPageSize] = useState(6)
  const onRefresh = ()=>{
      setPage(val=>1)
      setCouponList([])
      setHasMore(true)
  }
  const loadMore = async()=>{
    let result = await React.request.get('/coupon',{
      params:{status:active,page,pageSize}
    })
    if(result.code){
      setPage(val=>val+1)
      setCouponList(val => [...val, ...result.data.data])
      setHasMore(val=>result.data.has_more)
    }
  }
  return (
    <>
      {/* 选项卡切换 */}
      <React.UI.Tabs onChange={TabChange} activeKey={active} activeLineMode={'full'}>
        <React.UI.Tabs.Tab title="全部" key="2" />
        <React.UI.Tabs.Tab title="未使用" key="3" />
      </React.UI.Tabs>

      <React.UI.PullToRefresh
        onRefresh={onRefresh}
        >
          <React.UI.List className="coupon_list">
            {couponList.map((item, index) => (
            <React.UI.List.Item key={index}  className="coupon_item">
                <div className="item_content">
                    <Link to="/coupon/info">
                        <div className="left">
                            8<span>折</span>
                        </div>
                        <div className="right">
                            <div>{item.title}</div>
                            <div>订单满<span>100元</span>打<span>8折</span></div>
                            <div>每人限领1张</div>
                            <div>领取后10天内有效</div>
                        </div>
                    </Link>
                </div>
                <div className="item_btn">
                    <React.UI.Button color='primary' fill='solid' size='mini' disabled>已使用</React.UI.Button>
              </div>
            </React.UI.List.Item>
            ))}
        </React.UI.List>
        <React.UI.InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
      </React.UI.PullToRefresh>
      <Menu />
    </>
  )
}

export default Component